<template>
	<view class="tt-clock">
		<view class="tt-clock-box">
			<view class="circle">
				<view @click="addEvent">
					<text>打卡</text>
					<text class="txt">{{time}}</text>
					<view class="in-circle"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tt-clock-comp",
		data() {
			return {
				time: "22:54:54"
			};
		},
		onLoad() {
			this.setCurrentTime();
		},
		methods: {
			setCurrentTime(){
				let getT = ()=>{
					let dt = new Date();
					let h = dt.getHours();
					let m = dt.getMinutes();
					let s = dt.getSeconds();
					h = h < 10 ? "0"+h : h;
					m = m < 10 ? "0"+m : m;
					s = s < 10 ? "0"+s : s;
					this.time = `${h}:${m}:${s}`
				}
				getT();
				let t = setInterval(getT,1000)
			},
			addEvent(event){
				console.log("打卡")
			}
		}
	}
</script>

<style lang="scss">
@import "../../uni.scss";
@keyframes myScale {
	0% {
		transform: scale(1.1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1.1);
	}
}
.tt-clock {
	width: 100%;
	padding: 30rpx 0;
	.tt-clock-box {
		width: 100%;
		.circle {
			width: 160rpx;
			height: 160rpx;
			margin: 0 auto;
			text-align: center;
			border-radius: 50%;
			font-size: 14px;
			background-color: $uni-color-primary;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 1.75;
			position: relative;
			.in-circle {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				background-color: $uni-color-primary;
				position: absolute;
				top: 0;
				left: 0;
				opacity: .3;
				animation: myScale 2s infinite linear;
			}
			.txt {
				font-size: 12px;
				display: block;
			}
		}
	}
}
</style>